<!--<head>-->
<!--<meta charSet="UTF-8">-->
<!--<title>.....</title>-->
<!--<style>-->
<!--  * {-->
<!--    matgin: 0;-->
<!--    padding: 0;-->
<!--  }-->

<!--  .size {-->
<!--    font-size: 100px;-->
<!--  }-->

<!--  .color {-->
<!--    color: red;-->
<!--  }-->

<!--  .active {-->
<!--    background: skyblue;-->
<!--  }-->
<!--</style>-->
<!--</head>-->
<!--&lt;!&ndash;展示模板&ndash;&gt;-->
<!--<template>-->
<!--  <div id="app">-->
<!--    &lt;!&ndash;    <p v-once v-cloak>原始数据: {{name}}</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p>当前数据: {{name}}</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <input type="text" v-model="msg">&ndash;&gt;-->
<!--    &lt;!&ndash;    &lt;!&ndash;插值的方式：可以将指定的数据插入到指定的位置&ndash;&gt;&ndash;&gt;-->
<!--    &lt;!&ndash;    <p>++{{name}}&#45;&#45;</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    &lt;!&ndash;插值的方式：不会解析HTML&ndash;&gt;&ndash;&gt;-->
<!--    &lt;!&ndash;    <p>++{{msg}}&#45;&#45;</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    &lt;!&ndash;v-text的方式：会覆盖原有的内容&ndash;&gt;&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-text="name">++++</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    &lt;!&ndash;v-text的方式：也不会解析HTML&ndash;&gt;&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-text="msg">++++</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    &lt;!&ndash;v-html的方式：会覆盖原有的内容&ndash;&gt;&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-html="name">++++</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    &lt;!&ndash;v-html的方式：会解析HTML&ndash;&gt;&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-html="msg">++++</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-if="show">我是true</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-if="hidden">我是false</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-if="age >= 18">成年人</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-else>未成年人</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-if="score >= 90">优秀</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-else-if="score >= 80">良好</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-else-if="score >= 70">中等</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-else-if="score >= 60">及格</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-show="show">我是true</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-show="hidden">我是false</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-show="show">段落1</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-show="hidden">段落2</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    v-show的性能比v-if好&ndash;&gt;-->
<!--    &lt;!&ndash;    <ul>&ndash;&gt;-->
<!--    &lt;!&ndash;      <li v-for="(value, index) in list" :key="value">{{index}}&#45;&#45;{{value}}</li>&ndash;&gt;-->
<!--    &lt;!&ndash;      <li v-for="(value, index) in 'abcdefg'" :key="value">{{index}}&#45;&#45;{{value}}</li>&ndash;&gt;-->
<!--    &lt;!&ndash;      <li v-for="(value, index) in 4" :key="value">{{index}}&#45;&#45;{{value}}</li>&ndash;&gt;-->
<!--    &lt;!&ndash;      <li v-for="(value, index) in obj" :key="value">{{index}}&#45;&#45;{{value}}</li>&ndash;&gt;-->
<!--    &lt;!&ndash;    </ul>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果要给元素的属性绑定数据，那么是不能够使用插值语法的&ndash;&gt;-->
<!--    &lt;!&ndash;    <input type="text" value="name">&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：虽然通过v-model可以将数据绑定到input标签的value属性上，-->
<!--            但是v-model是由局限性的，v-model只能用于input/textare/select-->
<!--            但是在企业开发中我们还可能需要给其他标签的属性绑定数据      &ndash;&gt;-->
<!--    &lt;!&ndash;    <input type="text" v-model="name">&ndash;&gt;-->
<!--    &lt;!&ndash;    <input type="text" v-bind:value="name">&ndash;&gt;-->
<!--    &lt;!&ndash;    <input type="text" :value="name">&ndash;&gt;-->
<!--    &lt;!&ndash;&lt;!&ndash;    v-bind可以赋值，只要是合法js表达式就行&ndash;&gt;&ndash;&gt;-->
<!--    &lt;!&ndash;    <input type="text" :value="age + 1">&ndash;&gt;-->
<!--    &lt;!&ndash;    <p class="size color active">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果需要通过v-bind给class绑定类名，不能直接赋值-->
<!--            默认情况下v-bind会去model中查找数据，但是model中m没有对应的类名，所以无效，所以不能直接赋值&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :class="size">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果想让v-bind去style中查找类名，那么就必须把那么就必须把类命放到数组中-->
<!--            但是放到数组中之后默认还是会去model中去查找&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :class="[size]">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：将类名放到数组中后，还需要利用引号将类名括起来才会去style中查找&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :class="['size', 'color', 'active']">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果是通过v-bind来绑定我们的一个类名，那么在绑定的时候可以编写-->
<!--            一个三目运算符来实现按需绑定-->
<!--            格式：条件表达式 ? '需要绑定的类名' : ''&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :class="['size', 'color', flag ? 'active' : '']">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果是通过v-bind来绑定我们的一个类名，那么在绑定的时候还可以通过对象来决定是否-->
<!--            需要绑定-->
<!--            格式：{'需要绑定的类命' : 是否绑定}&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :class="['size', 'color', {'active' : false}]">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果是通过v-bind来绑定我们的一个类名，还可以使用model中的对象来替换数组&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :class="obj2">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    最后就可以从服务端动态的获取是否绑定&ndash;&gt;-->
<!--    &lt;!&ndash;    <p style="color: red">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：和绑定类名一样，默认情况下v-bind会去model中查找，找不到所以没效果&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :style="color: red">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：我们只需要将样式代码放到对象中赋值到style即可，但是取值必须用引号括起来&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :style="{color: 'red'}">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果样式的名称带-，那么也必须用引号括起来&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :style="{'color': 'red', 'font-size' : '100px'}">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :style="obj3">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果model中保存了多个样式的对象，想将多个对象都绑定给-->
<!--            style，那么可以将多个对象放到数组中赋值给style即可&ndash;&gt;-->
<!--    &lt;!&ndash;    <p :style="[obj3, obj4]">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <button onclick="alert('666')">我是按钮</button>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：-->
<!--            1.如果是通过v-on来绑定监听事件，那么在指定事件名称的时候不需要写on-->
<!--            2.如果是通过v-on来绑定监听事件，那么在赋值的时候必须赋值一个回调函数的名称&ndash;&gt;-->
<!--    &lt;!&ndash;    <button v-on:click="myFn">我是按钮</button>&ndash;&gt;-->
<!--    &lt;!&ndash;    <button @click="myFn">我是按钮</button>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：默认情况下，事件的回调函数可以反复执行，只要事件被触发就会反复执行&ndash;&gt;-->
<!--    &lt;!&ndash;    <button v-on:click="myFn">我是按钮</button>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果想让事件监听的回调函数只执行一次，就可以用.once修饰符&ndash;&gt;-->
<!--    &lt;!&ndash;    <button v-on:click.once="myFn">我是按钮</button>&ndash;&gt;-->
<!--    &lt;!&ndash;    注意点：如果想组至元素的默认行为，那么可以使用prevent的修饰符&ndash;&gt;-->
<!--    &lt;!&ndash;    <a href="http://www.it666.com" v-on:click.prevent="myFn">我是A标签</a>&ndash;&gt;-->
<!--    &lt;!&ndash;    默认情况下在嵌套的元素中，如果都监听了相同的事件，那么会触发事件冒泡-->
<!--            如果想组织事件冒泡，那么可以使用.stop修饰符&ndash;&gt;-->
<!--    &lt;!&ndash;    <div class="a" @click="myFn1">&ndash;&gt;-->
<!--    &lt;!&ndash;      <div class="b" @click.stop="myFn2">&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="c" @click="myFn3"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    如果想让回调只有当前元素触发事件的时候才执行，那么就可以使用.self修饰符&ndash;&gt;-->
<!--    &lt;!&ndash;    <div class="a" @click="myFn1">&ndash;&gt;-->
<!--    &lt;!&ndash;      <div class="b" @click.self="myFn2">&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="c" @click="myFn3"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    默认情况下是事件冒泡，如果想变成事件捕获，那么就需要使用capture修饰符&ndash;&gt;-->
<!--    &lt;!&ndash;    <div class="a" @click.capture="myFn1">&ndash;&gt;-->
<!--    &lt;!&ndash;      <div class="b" @click.capture="myFn2">&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="c" @click.capture="myFn3"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    <button @click="myFn('123', 45, $event)">我是按钮</button>&ndash;&gt;-->
<!--    &lt;!&ndash;    <input type="text" @keyup.enter="myFn">&ndash;&gt;-->
<!--    &lt;!&ndash;    <input type="text" @keyup.f2="myFn">&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-color>我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <input type="text" v-focus>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-color="'blue'">我是段落</p>&ndash;&gt;-->
<!--    &lt;!&ndash;    <p v-color="curColor">我是段落</p>&ndash;&gt;-->


<!--    <router-view></router-view>-->
<!--  </div>-->

<!--</template>-->

<!--&lt;!&ndash;<div id="app2">&ndash;&gt;-->
<!--&lt;!&ndash;  <p v-color="'red'"></p>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->

<!--<script src="main.js"></script>-->
<!--<script>-->
<!--import Vue from "vue";-->

<!--Vue.config.keyCodes.f2 = 113;-->
<!--/*-->
<!--  directive方法接受两个参数-->
<!--  第一个参数：指令的名称-->
<!--  第二个参数：对象-->
<!--  注意点：在自定义指令的时候，在指定指令名称的时候，不需要写v- -->
<!--  注意点：指令可以在不同的生命周期阶段执行-->
<!--  bind：指令被绑定到元素上的时候执行-->
<!--  inserted：绑定指令的元素被添加到父元素上的时候调用-->

<!--* */-->
<!--Vue.directive("color", {-->
<!--  // 这里的el就是被绑定指令的那个元素-->
<!--  bind: function (el, obj) {-->
<!--    el.style.color = "red";-->
<!--    el.style.color = obj.value;-->
<!--  }-->
<!--});-->
<!--Vue.directive("focus", {-->
<!--  // 这里的el就是被绑定指令的那个元素-->
<!--  inserted: function (el) {-->
<!--    el.focus();-->
<!--  }-->
<!--});-->

<!--/*第一个vue实例*/-->
<!--export default {-->
<!--  name: "App",-->
<!--  el: "#app",-->
<!--  data: function () {-->
<!--    return {-->
<!--      name: "123",-->
<!--      msg: "<span>我是span</span>",-->
<!--      show: true,-->
<!--      hidden: false,-->
<!--      age: 17,-->
<!--      score: 88,-->
<!--      list: ["张三", "李四", "王五", "赵六"],-->
<!--      obj: {-->
<!--        name: "对象",-->
<!--        age: 33,-->
<!--        gender: "男",-->
<!--        class: "哈哈哈"-->
<!--      },-->
<!--      flag: true,-->
<!--      obj2: {-->
<!--        'size': true,-->
<!--        'color': true,-->
<!--        'active': true-->
<!--      },-->
<!--      obj3: {-->
<!--        "color": "blue",-->
<!--        'font-size': '100px'-->
<!--      },-->
<!--      obj4: {-->
<!--        'background-color': "yellow"-->
<!--      },-->
<!--      gender: '男',-->
<!--      curColor: 'green'-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    myFn(name, age, e) {-->
<!--      alert('888');-->
<!--      //console.log(name, age, e);-->
<!--      //console.log(this.gender)-->
<!--    },-->
<!--    myFn1() {-->
<!--      console.log("爷爷")-->
<!--    },-->
<!--    myFn2() {-->
<!--      console.log("爸爸")-->
<!--    },-->
<!--    myFn3() {-->
<!--      console.log("儿子")-->
<!--    }-->
<!--  }-->
<!--}-->

<!--/*另一个vue实例*/-->
<!--// let vue2 = new Vue({-->
<!--//   el: '#app2',-->
<!--// })-->

<!--</script>-->
<!--&lt;!&ndash;样式代码&ndash;&gt;-->
<!--<style>-->
<!--#app {-->
<!--  font-family: Avenir, Helvetica, Arial, sans-serif;-->
<!--  -webkit-font-smoothing: antialiased;-->
<!--  -moz-osx-font-smoothing: grayscale;-->
<!--  text-align: center;-->
<!--  color: #2c3e50;-->
<!--  margin-top: 60px;-->
<!--}-->

<!--* {-->
<!--  matgin: 0;-->
<!--  padding: 0;-->
<!--}-->

<!--.size {-->
<!--  font-size: 100px;-->
<!--}-->

<!--.color {-->
<!--  color: red;-->
<!--}-->

<!--.active {-->
<!--  background: skyblue;-->
<!--}-->

<!--.a {-->
<!--  width: 300px;-->
<!--  height: 300px;-->
<!--  background: red;-->
<!--}-->

<!--.b {-->
<!--  width: 200px;-->
<!--  height: 200px;-->
<!--  background: blue;-->
<!--}-->

<!--.c {-->
<!--  width: 100px;-->
<!--  height: 100px;-->
<!--  background: green;-->
<!--}-->
<!--</style>-->

